<template>
  <div class="index">
    <Header></Header>
    <section>
      <div class="search-history" v-if="searchArr.length">
        <h2>
          <i class="iconfont icon-shijian"></i>
          <span>历史搜索</span>
          <span @click="deleteStorage">清空历史记录</span>
        </h2>
        <ul>
          <li
            v-for="(item, i) in searchArr"
            :key="i"
            @click="goSearchList(item)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <div v-else class="noSearch">暂无搜索记录</div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Header from "@/components/search/Header.vue"
import Tabbar from "@/components/common/Tabbar.vue"
import { MessageBox } from "mint-ui"
export default {
  components: { Header, Tabbar },
  data() {
    return {
      searchArr: []
    }
  },
  created() {
    // 获取本地存储
    this.searchArr = JSON.parse(localStorage.getItem('searchList')) || []
  },
  methods: {
    // 清除历史记录
    deleteStorage() {
      MessageBox({
        title: '提示',
        message: '确定执行此操作?',
        showCancelButton: true
      }).then(res => {
        if (res == 'confirm') {
          // 清除localStorage
          localStorage.removeItem('searchList')
          // 清除数据
          this.searchArr = []
        }
      })
    },
    goSearchList(item) {
      // 跳转搜索列表页
      this.$router.push({
        name: 'list',
        query: {
          key: item
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.index {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
section {
  flex: 1;
  background-color: #f5f5f5;
  overflow: hidden;
}
.search-history h2 {
  padding: 0.533333rem;
  font-weight: 400;
  font-size: 0.48rem;
}
.search-history h2 i {
  padding-right: 0.08rem;
  color: red;
  font-size: 0.48rem;
}
.search-history h2 span:last-child {
  margin-left: 3rem;
}
.search-history ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0.266666rem;
}
.search-history ul li {
  margin: 0.066666rem 0.166666rem;
  padding: 0.08rem 0.16rem;
  font-size: 0.373333rem;
  border: 1px solid #ccc;
}

.noSearch {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.4rem;
}
</style>